<template>
  <div class="box">
   <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="biaotou">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>考勤规则</el-breadcrumb-item>
      <el-breadcrumb-item>外勤规则</el-breadcrumb-item>
    </el-breadcrumb>
     <div class="box-box">
      <el-icon><Star /></el-icon>
      <span>外勤规则</span>
    </div>
    <div>
    <div class="box-one" v-for="(v,i) in checked" :key="i">
      <span>{{v.name}}</span>
        <el-checkbox v-model="v.check" :label=v.label size="large" @click="dianji1(v.id,!v.check)" />
    </div>

     <el-button type="primary" @click="tijiao()" >提交</el-button>
    </div>

  </div>
</template>

<script setup>
import {ref,onMounted} from"vue"
import * as service from "../../../api/liwei/liwei";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";


var checked =ref([{}
])

var arr= ref({
  id:'',
  checked:''
})

// 渲染
onMounted(async () => {
  var res = await service.waiqingliebiao();
  checked.value = res.data
  console.log(res.data);

})

// 勾选
var dianji1 = (id,check) =>{
  checked.value.check != check;
  arr.value = {id,check};
  console.log(arr.value);
}

// 提交
var tijiao = async () =>{
  var res =  await service.waiqinggaibianzhuangtai(arr.value)
  console.log(res);
   ElNotification({
    title: "提交通知",
    message: "提交成功",
    type: "success",
    duration: 1000,
  });
 
 
  
}
</script>

<style scoped lang="scss">
.box{
   .biaotou {
    font-size: 18px;
  }
  .box-box {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    margin-left: 40px;
    // padding-left: 40px;
    padding-bottom: 10px;

    border-bottom: 1px solid;
  }
  .box-one{
    margin-left: 40px;
    margin-top: 15px;
    font-size: 14px;
  
  }
  .box-two{
    margin-left: 40px;
     margin-top: 15px;
         font-size: 14px;

  }
  .box-three{
    margin-left: 40px;
     margin-top: 15px;
         font-size: 14px;

  }
  .el-button {
    margin-left: 40px;
     margin-top: 15px;
  }
}

</style>